<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap 4.0/css/bootstrap.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/animate.css">
    
    <title>Document</title>
</head>
<body>
    <!--
5挡：
  <576px  超小屏幕   col-
  ≥576px  小屏幕    col-sm-
  ≥768px  中屏幕   col-md-
  ≥992px  大屏幕   col-lg-
  ≥1200px  超大屏幕  col-xl-
-->






<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top navhh pl-md-1 p-0">
    <a class="navbar-brand font-weight-bold text-success log" href="#">Bootstrap实战
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  
    <div class="collapse navbar-collapse justify-content-end " id="navbarSupportedContent" >
      <ul class="navbar-nav bg-white">
        <li class="nav-item active">
          <a class="nav-link" href="#banner">首页 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#Nuxt">论坛</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#chuniu1">前端开发</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#kecheng">最新课程</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#chuiniu3">移动APP</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#lixi">联系我们</a>
        </li>
       
        
      </ul>
      
    </nav>
    <section id="banner">
       <div class="filter">
           <div class="container text-center">
               <div class="row">
                   <div class="col-md-10 offset-md-1 item1 wow fadeInUp">
                       <h1>Bootstrap实战课程等你来战！</h1>
                       <p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
                       <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                       <img src="./images/TQ_BG.png" alt="" class="img-fluid">
                   </div>
               </div>
           </div>
       </div>
    </section>
    <section id="Nuxt">
        <div class="container">
            <div class="row text-center wow fadeInDown">
                
                <div class="col-md-4 ">
                    <div class="item5">
                        <img src="./images/bbs-1.png" alt="" class="img-fluid">
                        <h3>Nuxt.js 框架是如何运作的</h3>
                        <p>Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用。</p>
                    </div>
                </div>
                <div class="col-md-4 ">
                    <div class="item5">
                        <img src="./images/bbs-2.png" alt="" class="img-fluid">
                        <h3>它是针对 JavaScript 应用程序</h3>
                        <p>它可以帮助您编写性能一致、在不同环境（客户端、服务器和原生环境）中运行且易于测试的应用程序。</p>
                    </div>
                </div>
                <div class="col-md-4 ">
                    <div class="item5">
                        <img src="./images/bbs-3.png" alt="" class="img-fluid">
                        <h3>Rust 程序设计语言</h3>
                        <p>Rust 被证明是可用于大型的、拥有不同层次系统编程知识的开发者团队间协作的高效工具。</p>
                    </div>
                </div>
            </div>
        </div>


    </section>
    <section id="chuniu1">
        <div class="container">
            <div class="row ">





                <div class="col-md-6 wow bounceInLeft">
                    <p> 为什么要使用 Grunt？</p>
                    <p>Grunt 生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用 Grunt 自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个 Grunt 插件，然后将其发布到 npm 上吧。</p>
                    <p>在继续学习前，你需要先将Grunt命令行（CLI）安装到全局环境中。</p>
                    <p>在安装 Grunt 前，请确保当前环境中所安装的 npm 已经是最新版本。</p>
                </div>
                <div class="col-md-6 text-center wow bounceInRight">
                    <img src="./images/html5-bg.png" alt="">
                </div>
            </div>
        </div>

    </section>
    <section id="chuniu1 bg-white">
        <div class="container">
            <div class="row ">





                <div class="col-md-6 order-1 wow fadeInDown">
                    <p> 为什么要使用 Grunt？</p>
                    <p>Grunt 生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用 Grunt 自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个 Grunt 插件，然后将其发布到 npm 上吧。</p>
                    <p>在继续学习前，你需要先将Grunt命令行（CLI）安装到全局环境中。</p>
                    <p>在安装 Grunt 前，请确保当前环境中所安装的 npm 已经是最新版本。</p>
                </div>
                <div class="col-md-6 text-center wow fadeInDown">
                    <img src="./images/bootstrap-bg.png" alt="">
                </div>
            </div>
        </div>

    </section>
    <!-- data-wow-delay=0.3s 延迟0.3秒播放 -->
    <section id="kecheng">
        <h1>最新课程</h1>
        <div class="container">
            <div class="row wow fadeIn" data-wow-delay="0.3s"> 
                <div class="col-md-3">
                    <div class="item5 text-center">
                        <img src="./images/course-1.png" alt="" class="img-fluid">
                        <div class="item6">
                            <a href="#" class="btn btn-outline-primary">
                                加入学习
                            </a>
                        </div>
                       
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="item5 text-center">
                        <img src="./images/course-2.png" alt="" class="img-fluid">
                        <div class="item6">
                            <a href="#" class="btn btn-outline-primary">
                                加入学习
                            </a>
                        </div>
                       
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="item5 text-center">
                        <img src="./images/course-3.png" alt="" class="img-fluid">
                        <div class="item6">
                            <a href="#" class="btn btn-outline-primary">
                                加入学习
                            </a>
                        </div>
                       
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="item5 text-center">
                        <img src="./images/course-4.png" alt="" class="img-fluid">
                        <div class="item6">
                            <a href="#" class="btn btn-outline-primary">
                                加入学习
                            </a>
                        </div>
                       
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="item5 text-center">
                        <img src="./images/course-5.png" alt="" class="img-fluid">
                        <div class="item6">
                            <a href="#" class="btn btn-outline-primary">
                                加入学习
                            </a>
                        </div>
                       
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="item5 text-center">
                        <img src="./images/course-6.png" alt="" class="img-fluid">
                        <div class="item6">
                            <a href="#" class="btn btn-outline-primary">
                                加入学习
                            </a>
                        </div>
                       
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="item5 text-center">
                        <img src="./images/course-7.png" alt="" class="img-fluid">
                        <div class="item6">
                            <a href="#" class="btn btn-outline-primary">
                                加入学习
                            </a>
                        </div>
                       
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="item5 text-center">
                        <img src="./images/course-8.png" alt="" class="img-fluid">
                        <div class="item6">
                            <a href="#" class="btn btn-outline-primary">
                                加入学习
                            </a>
                        </div>
                       
                    </div>
                </div>
              
            </div>
            
            
            
        </div>
    </section>
    <section id="chuiniu3">
        <div class="container">
            <div class="row">
                <div class="col-md-6 wow fadeInDown">
                    <p>Bootstrap相关优质模板下载</p>
                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <a href="#" class="btn btn-info">IOS下载</a>
                    <a href="#" class="btn btn-info">安卓下载</a>
                </div>
                <div class="col-md-6 wow fadeInDown">
                    <img src="./images/app-download.png" alt="" class="img-fluid">
                </div>
            </div>
        </div>
    </section>
   <section id="lixi">
       <div class="mosha">
           <div class="container">
               <div class="row">
                   <div class="col-md-6 wow bounceInLeft">
                       <p>联系我们</p>
                       <p>Bootstrap 最初是由 @mdo 和 @fat 于2010年中旬创造的。 在开源之前被称为 Twitter Blueprint。经过几个月的开发，Twitter 举办了首届 Hack Week 并将这个项目被公布出来，各个技能水平的开发者都可以在没有任何外部指导的情况下参与进来。在开源之前的近一年多的时间里，这个项目作为公司内部工具开发的样式指南，当然，现在它仍然扮演者同样的角色。</p>
                       <p>地址：深圳市南山区学府路东百度国际大厦</p>
                       <p>电话：(+86 10)5992 8888</p>
                       <p>邮箱：518000@qq.com</p>
                   </div>
                   <div class="col-md-6 wow bounceInRight">
                        <form>
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="text" class="form-control"  placeholder="你的名字">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" class="form-control"  placeholder="你的邮箱">
                                </div>
                                <div class="col-md-12 ">
                                    <input type="text" class="form-control"  placeholder="标题">
                                </div>
                                <div class="col-md-12 ">
                                    <textarea class="form-control" rows="4" placeholder="请输入内容"></textarea>
                                </div>
                                <div class="col-md-12">
                                    <button type="button" class="btn btn-primary">提交</button>
                                </div>
                                
                            </div>
                       
                            
                       </form>
                   </div>
               </div>
           </div>

       </div>
   </section>
   <section id="banquan" class="text-center d-md-block d-none">
       <p>京ICP备11008151号-6 京公网安备11010802014853</p>
   </section>
  

   
</body>
<script src="./js/jQuery.min.js"></script>
<script src="./bootstrap 4.0/js/bootstrap.js"></script>
<script src="./js/wow.min.js"></script>
<script>
    $(function(){
        
        $(".navbar-nav").on("click","a",function(){
            var offsetTop = $($(this).attr("href")).offset().top - 70.8
            console.log($($(this).attr("href")).offset())
      $("html,body").animate({scrollTop:offsetTop},500)
      //关闭下拉窗口 但还可以打开
      $(".navbar-collapse").collapse('hide')
           
            return false
        })
        //引用实例对象初始化
        new WOW().init()
    })
</script>

</html>